/*******************************GRID & COLUMNS*******************************/

.grid{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}


.grid>*{
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  padding: .512rem 0;
}


.grid__col{
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  padding: .512rem 0;
}


/*This gets applied when the device width is above 768px*/
@media screen and (min-width: 768px){
  .grid {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .grid>*{
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: .512rem;
  }
  .grid__col{
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: .512rem;
  }

}



/*GRID COMPATIBILITY IE10+*/
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 .grid { display:block;}

 /*This gets applied when the device width is above 768px*/
@media screen and (min-width: 768px){
  .grid{display: flex}
   .grid_col{display: inline-block;}
   .grid>*{display: inline-block;}
}
 }
